<template>
  <div class="distluc">
    <div class="map_body" id="container"></div>
    <el-divider></el-divider>
    <div v-for="(value, index) in RouterList.areaSpotList" :key="index" style="margin-bottom:20px">
      <label style="display: block;margin-bottom:20px">巡检里程:{{ value.distance | kmUnit() }} <span>总耗时:{{
        value.totalTime
      }}</span></label>
      <el-scrollbar style="width:100%;">
        <el-steps finish-status="process" :active="value.inspectionRoutesVoList.length" style="padding:5px">
          <el-step v-for="(item, i) in value.inspectionRoutesVoList" :key="i" :title="i === 0 ? '开始巡检' : item.areaName">
            <span slot="icon">
              <img :src="item.position == '1' ? LvDa : Lvmin" style="width:25px;height:29px">
            </span>
            <div slot="description">
              <template v-if="i === 0">
                巡检员:{{ value.userName }}
                <br>
              </template>
              <template v-else>
                <div v-for="(v, k) in item.inspectionTaskInfoList" :key="k">
                  <strong>·</strong> {{ v.equipmentName }}
                </div>
              </template>
              {{ item.createTime }}
            </div>
          </el-step>
          <el-step title="结束巡检" v-if="rowObj.implementStatus === '2' || rowObj.implementStatus === '3'">
            <span slot="icon">
              <img
                :src="value.inspectionRoutesVoList[value.inspectionRoutesVoList.length - 1].position == '1' ? LvDa : Lvmin"
                style="width:25px;height:29px">
            </span>
            <div slot="description">
              {{ value.inspectionRoutesVoList[value.inspectionRoutesVoList.length - 1].createTime }}
            </div>
          </el-step>
        </el-steps>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { getSelectinspectionTaskInfo, getSelectinspectionroutes } from "@/api/equipmentInspct/index.js";
import Assay from '@/assets/images/u9988.png';
import LvDa from '@/assets/images/u189.png';
import RedDa from '@/assets/images/u209.png';
import Lvmin from '@/assets/images/u214.png';
import Huangmin from '@/assets/images/u217.png';
import Redmin from '@/assets/images/u221.png';
import Xrwgif from '@/assets/images/xrwgif.gif';
import QD from '@/assets/images/1qd.png';
import ZD from '@/assets/images/2zd.png';
import AMapLoader from '@amap/amap-jsapi-loader';
//安全密钥
window._AMapSecurityConfig = {
  securityJsCode: '249c8810513321911bf1b25c975e075b',
}
export default {
  props: ['rowObj'],
  data () {
    return {
      InfoList: [],
      RouterList: [],
      Redmin,
      Assay,
      LvDa,
      RedDa,
      Lvmin,
      QD,
      ZD,
      Huangmin,
      Xrwgif,
    }
  },
  mounted () {
    this.getinit()
  },
  methods: {
    async getinit () {
      let params = {
        inspectionTaskId: this.rowObj.id
      }
      let { data: data } = await getSelectinspectionTaskInfo(params)//获取地图区域点位
      let { data: Routes } = await getSelectinspectionroutes(params)//获取地图轨迹路线
      this.InfoList = data
      this.RouterList = Routes
      this.RouterList.areaSpotList.map(item => {
        return {
          ...item,
          distance: 0
        }
      })
      this.initMap()
    },
    initMap () {
      const th = this
      AMapLoader.load({
        key: "d3c2d6765613d9728729a9c9afe9b78b",    // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.AutoComplete", "AMap.PlaceSearch", "AMap.ControlBar", "AMap.MouseTool"],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("container", {  //设置地图容器id
          viewMode: "2D",    //是否为3D地图模式
          zoom: 17,           //初始化地图级别
          center: [114.031514, 22.534035], //初始化地图中心点位置
          resizeEnable: true,
          mapStyle: 'amap://styles/darkblue', //设置地图的显示样式
        });
        th.InfoList.forEach(item => {
          var icon = new AMap.Icon({
            size: item.position == '1' ? new AMap.Size(28, 28) : new AMap.Size(24, 29),    // 图标尺寸
            image: item.position == '1' ? [th.Assay, th.LvDa, th.RedDa][item.inspectionTaskInfoList && item.inspectionTaskInfoList[0].status || 0] : [th.Huangmin, th.Lvmin, th.Redmin][item.inspectionTaskInfoList && item.inspectionTaskInfoList[0].status || 0],  // Icon的图像
            // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: item.position == '1' ? new AMap.Size(28, 28) : new AMap.Size(24, 29)   // 根据所设置的大小拉伸或压缩图片
          });
          var marker = new AMap.Marker({
            offset: new AMap.Pixel(-13, -26),
            position: new AMap.LngLat(item.longitude * 1, item.latitude * 1),
            icon: icon,
          });
          let text = `<div style='background:  url(${require('@/assets/images/bimapbg.png')}) no-repeat;background-size: cover;color:#fff;padding:5px 10px 20px 10px;border-radius:3px;'>`
          let texttwo = []
          if (item.position == '0') {
            text += `<br>建筑物名称 # ${item.buildingName}<br><br>`
          }
          item.inspectionTaskInfoList.forEach((element, index) => {
            if (index < 5) {
              texttwo.push(`<span style='color:${['#fec865', '#3dce8c', '#ff6974'][element.status]}'>${index + 1}. ${element.equipmentName}<span style='font-weight:900;float:right;padding:2px 4px;border-radius: 5px;border: 1px solid ${['#fec865', '#3dce8c', '#ff6974'][element.status]};box-shadow: 0 0 0 1px ${['#fec865', '#3dce8c', '#ff6974'][element.status]}, inset 0 0 10px ${['#fec865', '#3dce8c', '#ff6974'][element.status]};'>${['待巡检', '已巡检', '延期巡检'][element.status]}</span></span>`)
            } else if (index == 5) {
              texttwo.push(`......`)
            } else {
              return false
            }
          })
          let textstr = texttwo.join('<br><br>')
          let wei = `</div>`
          let texts = text + textstr + wei
          // 创建 infoWindow 实例	
          var infoWindow = new AMap.InfoWindow({
            content: texts,  //传入 dom 对象，或者 html 字符串
            isCustom: true,  //使用自定义窗体
            anchor: 'top-center',
          });
          let wenben = `<div style='background: url(${require('@/assets/images/bimapbg.png')}) no-repeat;background-size: cover;color:#fff;padding:15px 10px;border-radius:3px;max-height:250px;overflow:scroll;overflow-y: auto;overflow-x: auto;'>`
          let wenbentwo = []
          if (item.position == '0') {
            text += `<br>建筑物名称 # ${item.buildingName}<br><br>`
          }
          item.inspectionTaskInfoList.forEach((element, index) => {
            wenbentwo.push(`<span style='color:${['#fec865', '#3dce8c', '#ff6974'][element.status]}'>${index + 1}. ${element.equipmentName}<span style='font-weight:900;float:right;padding:2px 4px;border-radius: 5px;border: 1px solid ${['#fec865', '#3dce8c', '#ff6974'][element.status]};box-shadow: 0 0 0 1px ${['#fec865', '#3dce8c', '#ff6974'][element.status]}, inset 0 0 10px ${['#fec865', '#3dce8c', '#ff6974'][element.status]};'>${['待巡检', '已巡检', '延期巡检'][element.status]}</span></span>`)
          })
          let wenbenstr = wenbentwo.join('<br><br>')
          let neirong = wenben + wenbenstr + wei
          // 创建 infoWindow 实例	
          var infoWindowClick = new AMap.InfoWindow({
            content: neirong,  //传入 dom 对象，或者 html 字符串
            isCustom: true,  //使用自定义窗体
            anchor: 'top-center',
          });
          marker.on('click', function (e) {//标记鼠标悬浮
            infoWindowClick.open(th.map, [item.longitude * 1, item.latitude * 1]);
          });
          marker.on('mouseover', function (e) {//标记鼠标悬浮
            infoWindow.open(th.map, [item.longitude * 1, item.latitude * 1]);
          });
          marker.on('mouseout', function (e) {//标记鼠标离开
            infoWindow.close();
          });
          this.map.add(marker)
          // this.map.addControl(new AMap.Scale());
        });
        th.RouterList.coordinateList.forEach((value, index) => {//轨迹
          let path = []
          value.inspectionRoutesVoList.forEach(v => {
            path.push([v.longitude, v.latitude])
          })
          var distance = Math.round(AMap.GeometryUtil.distanceOfLine(path));
          th.$set(th.RouterList.areaSpotList[index], 'distance', distance)
          // 创建折线实例
          var polyline = new AMap.Polyline({
            path: path,
            isOutline: false,
            borderWeight: 2, // 描边宽度，默认为 1
            outlineColor: '#fff',
            strokeWeight: 6,
            cursor: 'pointer',
            showDir: true,
            strokeOpacity: 1,//线条透明度
            strokeColor: ['#2accb3', '#3789de', '#2ba736', '#ba2350', '#bc6d33'][index], // 线条颜色
            lineJoin: 'round' // 折线拐点连接处样式
          });
          let text = `<div align="center" style='font-size:14px;background: url(${require('@/assets/images/bikm.png')}) no-repeat;background-size: cover;color:#fff;padding:5px 10px;border-radius:3px;'>` +
            `<div>巡检里程:<span style="font-size:24px">${this.kmUnit(distance)}</span></div> <div style="color:#8CB8F4;text-decoration: underline;line-height:20px;margin:10px 0px">计划巡检时间:<span style="color:#78FDFF">${value.inspectionPlanDate}</span></div><div style="font-size:17px;margin-bottom:10px">巡检人:<span style="font-weight: 900;color: ${['#2accb3', '#3789de', '#b3b52a', '#ba2350', '#b55b2a', '#7020bb', '#c924a0', '#44ad28'][index]};text-shadow: 0px 1px 5px;">${value.userName}</span></div></div>`

          var infoWindow = new AMap.InfoWindow({
            content: text,
            isCustom: true
          });
          polyline.on('mouseover', function (e) {//标记鼠标悬浮
            infoWindow.open(th.map, [e.lnglat.lng, e.lnglat.lat])
            polyline.setOptions({ isOutline: true })

          });
          polyline.on('mouseout', function (e) {//标记鼠标离开
            infoWindow.close()
            polyline.setOptions({ isOutline: false })

          });
          // 将折线添加至地图实例
          this.map.add(polyline)
          var qd = new AMap.Icon({
            size: new AMap.Size(25, 32),    // 图标尺寸
            image: th.QD,  // Icon的图像
            // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: new AMap.Size(25, 32)   // 根据所设置的大小拉伸或压缩图片
          });
          var markerqd = new AMap.Marker({
            offset: new AMap.Pixel(-13, -26),
            position: new AMap.LngLat(value.inspectionRoutesVoList[0].longitude * 1, value.inspectionRoutesVoList[0].latitude * 1),
            icon: qd,
          });
          // 将折线添加至地图实例
          var icon = new AMap.Icon({
            size: value.status === '0' ? new AMap.Size(50, 58) : new AMap.Size(25, 32),    // 图标尺寸
            image: value.status === '0' ? th.Xrwgif : th.ZD,  // Icon的图像
            // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: value.status === '0' ? new AMap.Size(50, 58) : new AMap.Size(25, 32)  // 根据所设置的大小拉伸或压缩图片
          });
          var marker = new AMap.Marker({
            offset: value.status === '0' ? new AMap.Pixel(-20, -50) : new AMap.Pixel(-13, -26),
            position: new AMap.LngLat(value.inspectionRoutesVoList[value.inspectionRoutesVoList.length - 1].longitude * 1, value.inspectionRoutesVoList[value.inspectionRoutesVoList.length - 1].latitude * 1),
            icon: icon,
          });
          this.map.add(marker)
          this.map.add(markerqd)

        });

        this.map.setFitView()
        this.map.addControl(new AMap.Scale());

      }).catch(e => {
        console.log(e);
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.map_body {
  width: 100%;
  height: 600px;
  font-size: 14px;

  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px;
    height: 8px;
    /*高宽分别对应横竖滚动条的尺寸*/
  }

  ::-webkit-scrollbar-track {
    background-color: #fff;
  }

  ::-webkit-scrollbar-thumb {
    background: rgb(0, 0, 0, 0.5);
    border-radius: 25px;
  }
}

::v-deep.distluc .el-step__icon {
  border: none !important;
}

.ovfler {
  width: 100%;
  overflow-x: auto;

  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px;
    height: 8px;
    /*高宽分别对应横竖滚动条的尺寸*/
  }

  ::-webkit-scrollbar-track {
    background-color: #fff;
  }

  ::-webkit-scrollbar-thumb {
    background: rgb(0, 0, 0, 0.5);
    border-radius: 25px;
  }
}
</style>